$marp-highlight: #039BE5

body
  min-width: 300px

code
  color: #444
  background: #f0f0f0
  border: 1px solid #ccc
  font-size: 0.8em

pre
  line-height: 1.4

pre > code
  border: none

hr
  border-color: #ccc
  border-style: dotted

.btn
  &.btn-landing
    +button-variant($brand-primary, #fff, transparent)

    &.dropdown-toggle
      +button-variant(#fff, $brand-primary, transparent)

  &.btn-header
    +button-variant(#fff, $brand-primary, transparent)

    &.dropdown-toggle
      +button-variant(#fff, darken($brand-primary, 5%), transparent)

.download-button
  .recommend-help
    display: none

  .recommend
    .recommend-help
      display: inline

.navbar
  box-shadow: 0 1px 3px rgba(#000, .12), 0 1px 2px rgba(#000, .24)

  .navbar-brand
    font-weight: bold
    color: $brand-primary !important

    small
      font-weight: normal
      font-size: 0.6em
      padding: 0 0 0 0.6em

    img.brand-icon
      display: inline-block
      margin-top: -$navbar-padding-horizontal + 9px
      margin-left: -$navbar-padding-horizontal + 9px
      margin-right: 0.35em
      width: 32px
      height: 32px

  .hamburger-menu-text
    display: block
    overflow: hidden

    font-size: 12px
    height: 14px
    max-height: 14px
    line-height: 14px

#landing, #footer
  color: #fff

  background: $brand-primary
  background: -webkit-linear-gradient(135deg, lighten($brand-primary, 10%), $brand-primary 50%, $marp-highlight 50%, darken($marp-highlight, 5%))
  background: -moz-linear-gradient(135deg, lighten($brand-primary, 10%), $brand-primary 50%, $marp-highlight 50%, darken($marp-highlight, 5%))
  background: -ms-linear-gradient(135deg, lighten($brand-primary, 10%), $brand-primary 50%, $marp-highlight 50%, darken($marp-highlight, 5%))
  background: -o-linear-gradient(135deg, lighten($brand-primary, 10%), $brand-primary 50%, $marp-highlight 50%, darken($marp-highlight, 5%))
  background: linear-gradient(135deg, lighten($brand-primary, 10%), $brand-primary 50%, $marp-highlight 50%, darken($marp-highlight, 5%))

  position: relative
  z-index: 100
  box-shadow: 0 1px 3px rgba(#000, .12), 0 1px 2px rgba(#000, .24)

#landing
  margin: 51px 0 0 0
  padding: 0 10px

  h1
    margin: 0
    font-weight: bold
    font-size: 3em

  h2
    margin: 10px 0 0 0
    font-size: 1.25em

  p
    text-align: center

  .landing-logo
    margin: 0 auto

    td
      vertical-align: middle

    .landing-icon
      img
        display: block
        margin: 0 auto
        width: 100%
        min-width: 64px
        max-width: 128px

    .landing-description
      padding: 0 0 0 20px

      text-shadow: 0 1px 3px rgba(#000, .12), 0 1px 2px rgba(#000, .24)

  .landing-screenshot-container
    padding: 0 35px 10px 35px

    .landing-screenshot
      display: block
      margin: 0 auto
      width: 100%
      max-width: 600px

      border-radius: 6px
      box-shadow: 0 20px 40px rgba(#000, .5)

  .landing-space
    height: 40px

  .landing-contents
    margin: 30px 0 0 0

    .download-button
      border-radius: $btn-border-radius-large
      box-shadow: 0 1px 3px rgba(#000, .12), 0 1px 2px rgba(#000, .24)

    p
      margin: 10px 0

    .notice
      margin: 3px 0 0 0
      color: mix($brand-primary, #fff, 50%)
      font-size: 0.75em

    .notice a
      color: mix($brand-primary, #fff, 50%)
      text-decoration: underline

    &::after
      content: ''
      display: none //block
      width: 1px
      height: 40px
      height: 4vw
      max-height: 40px

#posts
  font-size: 15px
  line-height: 1.7

  .post
    position: relative
    z-index: 91

    padding: 2em 0

    background: #fcfcfc
    background: -webkit-linear-gradient(135deg, #fff, #fcfcfc 50%, #f9f9f9 50%, #f6f6f6)
    background: -moz-linear-gradient(135deg, #fff, #fcfcfc 50%, #f9f9f9 50%, #f6f6f6)
    background: -ms-linear-gradient(135deg, #fff, #fcfcfc 50%, #f9f9f9 50%, #f6f6f6)
    background: -o-linear-gradient(135deg, #fff, #fcfcfc 50%, #f9f9f9 50%, #f6f6f6)
    background: linear-gradient(135deg, #fff, #fcfcfc 50%, #f9f9f9 50%, #f6f6f6)

    box-shadow: 0 6px 12px rgba(#000, .05)
    text-shadow: 0 1px 0 #fff

    .container
      padding-left: 45px
      padding-right: 45px

    .btn
      text-shadow: none

  .post:nth-child(2n)
    z-index: 90

    background: #f3f3f3
    background: -webkit-linear-gradient(135deg, #f6f6f6, #f3f3f3 50%, #efefef 50%, #ececec)
    background: -moz-linear-gradient(135deg, #f6f6f6, #f3f3f3 50%, #efefef 50%, #ececec)
    background: -ms-linear-gradient(135deg, #f6f6f6, #f3f3f3 50%, #efefef 50%, #ececec)
    background: -o-linear-gradient(135deg, #f6f6f6, #f3f3f3 50%, #efefef 50%, #ececec)
    background: linear-gradient(135deg, #f6f6f6, #f3f3f3 50%, #efefef 50%, #ececec)

  .post-markdown
    display: table
    margin: 0 auto

  .post-sub-image
    display: block
    margin: 2em auto
    width: 100%

    box-shadow: 0 0 10px rgba(#000, .15)

  h1, h2, h3, h4, h5, h6
    font-weight: bold

    > code
      line-height: 2
      font-size: 0.5em

  h4, h5, h6
    color: #777

  h1
    font-size: 2em
    color: $brand-primary

  h2
    font-size: 1.3em

  h3
    font-size: 1.15em

  h4
    font-size: 1.05em

#footer
  padding: 15px 15px 5px 15px
  font-size: 0.9em
  box-shadow: 0 -1px 3px rgba(#000, .12), 0 -1px 2px rgba(#000, .24)

  a
    color: #fff
    text-decoration: underline
